<template>
	<div class="App">
		<h1>{{ msg }}{{ name }}</h1>
		<!--通过父组件给子组件传递函数的方式，实现子给父传递数据-->
		<School :getSchoolName="getSchoolName"/>
		<hr>
		<!--通过父组件给子组件绑定自定义事件的方式，实现子给父传递数据-->
		<!--注意！！！传入的函数=前为函数名，后面的为回调名-->
	    <Student v-on:Gui="getStudentName"/>
		<!--由于v-on@可以缩写为：-->
		<!--所以如果绑定原生dom事件 @click=“”，click会被认为是自定义事件-->
		<!--解决办法： @click.native-->

		<!--第二种写法比第一种写法更灵活-->
		<!-- <Student ref="student"></Student> -->
	</div>
</template>

<script>
	import School from './components/School'
	import Student from './components/Student'

	export default {
		name:'App',
		components:{School,Student},
		data(){
			return{
				msg:'你好啊',
				studentName:''
			}
			
		},
		methods:{
			getSchoolName(name){
				this.studentName=name
			},
			getStudentName(name){
				console.log(name)
			}
		},
		// mounted(){
		// 	//$on表示当....时
		// 	//改为$once可以实现只使用一次
		// 	this.$ref.student.$on('Gui',getStudentName)

		//  该函数的返回对象里的，this指的是触发该方法的实例对象
		//	这里返回的this指的是Student对象

		//	如果写成箭头函数，this指的就是当前组建的实例对象
		//这里就是app的vm
		// }
	}
</script>

<style scoped>
	.App{
		background-color: pink;
		padding: 5px;
	}
</style>